<script setup lang="ts">

import type {DivType} from "@/types/componentsType";

const router = useRouter()
const clickChangeThem = (e: PointerEvent) => {
  const div = e.target as DivType
  const index = div && changeStyle(div as HTMLElement)
  const message_route = {name: "talk"}
  const friend_route = {name: "friend"}
  // 更改路由
  router.push(index == '1' ? message_route : friend_route)
}


const changeStyle: (div: HTMLElement) => string = (div) => {
  const parent = div.parentElement?.parentElement
  const icon = div.nextSibling as HTMLElement | null
  const allLIstItem = parent ? parent.querySelectorAll('.left-slide-item') : []
  if (icon) {
    icon.classList.add('active')
  }
  allLIstItem.forEach((item) => {
    if (item.childNodes[1] !== div.nextSibling) {
      (item.childNodes[1] as HTMLElement)?.classList.remove('active')
    }
  })
  return div.dataset['index'] ? div.dataset['index'] : '0'
}
</script>

<template>
  <div class="left-slide">
    <div class="action-box">
      <div class="left-slide-item no_drag">
        <img src="../../assets/vue.svg" alt="11">
      </div>
      <div @click="(e)=>clickChangeThem(e as PointerEvent)" class="item-box">
        <div class="left-slide-item no_drag">
          <div class="mouse_mark" :data-index="1"></div>
          <el-icon size="30" class="active">
            <i-ep-chatLineRound/>
          </el-icon>
        </div>
        <div class="left-slide-item no_drag">
          <div class="mouse_mark" :data-index="2"></div>
          <el-icon size="30">
            <i-ep-userFilled/>
          </el-icon>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.left-slide {
  width: 100%;
  height: 100vh;
  position: relative;
  padding: 0;
  margin: 0;
  background-color: rgb(44, 44, 44);

  .action-box {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: start;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;

    .left-slide-item {
      width: 100%;
      height: 3em;
      margin: 0.25em 0;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      transition: all 0.5s;

      .mouse_mark {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% - 2px);
        height: 100%;
        z-index: 9999;
        background-color: transparent;
      }

      :deep(.active) {
        color: rgb(10, 108, 206);
      }

    }

  }
}

</style>